import { useState, useEffect } from 'react';
import Swiper from 'react-native-swiper';
import { Dimensions, FlatList, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import codefans_net_CC2PY from './PinYin';
import { baseURL } from '../../context/AuthProvider';
import moment from 'moment';
import axios from 'axios';
import { AntDesign } from '@expo/vector-icons';

const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#fff' }}>{children}</Text>
        </TouchableOpacity>
    )
}
const { width, height } = Dimensions.get('window');

const PlantImage = ({ navigation, route }) => {
    const images = route.params.images;
    const [imgs, setImgs] = useState([
        'http://192.168.253.1:8080/images/plantswiper/cao2.png',
        'http://192.168.253.1:8080/images/plantswiper/cao1.jpg',
    ])
    const [tips, setTips] = useState([]);
    const [plantNews, setPlantNews] = useState([]);
    const toBuy = () => {
        navigation.navigate('Home')
    }
    const toMessage = (item) => {
        navigation.navigate('message', {
            item: item
        });
        axios.post('/guide/addread', {
            guideid: item.guideid
        }).then(res => {
            console.log(res);
        })
    }
    useEffect(() => {
        navigation.setOptions({
            headerBackVisible: false,
            title: images.cropname
        });
        console.log(images);
        // console.log(route.params.imgs);
        // setTips(images.habit);
        setImgs(route.params.imgs);
        // 获取养护贴士
        axios.post('/guide/planttips', {
            cropsid: images.cropsid
        }).then(res => {
            console.log(res);
            if (res.code == 200) {
                setTips(res.data)
            }
        })
        // 帖子获取
        axios.post('/guide/plantnews', {
            title: images.cropname
        }).then(res => {
            console.log(res);
            if (res.code == 200) {
                setPlantNews(res.data)
            }
        })
    }, []);
    return (
        <ScrollView>
            <View style={{ alignItems: 'center', backgroundColor: '#fffffd', minHeight: height, width: width }}>
                <View style={{ height: 198, alignItems: 'center', top: 15, }}>
                    <Swiper autoplay={true} height={198} showsPagination={true} dotColor="white"
                        activeDotColor='yellow' horizontal={true} >
                        {
                            imgs.map((item) => {
                                // console.log(item, index)
                                //cover: 等比例放大; center:不变; contain:不变; stretch:填充;
                                return (
                                    <View key={item.id} style={{ height: '100%', alignItems: 'center', borderRadius: 12 }}>
                                        <Image
                                            style={{ height: 198, width: '90%', borderRadius: 12, borderColor: '#9AD37A', borderWidth: 1.5 }}
                                            key={item.id}
                                            source={{ uri: baseURL + item.swiperimg }}
                                        />
                                    </View>
                                )
                            })
                        }
                    </Swiper>
                </View>
                <View style={{
                    width: '50%', height: 91,
                    alignItems: 'center',
                    borderBottomWidth: 1.2,
                    borderBottomColor: '#9AD37A',
                    marginBottom: 5
                }}>
                    <Text style={{ fontSize: 22, fontWeight: 'bold', top: 30 }}>{images.cropname}</Text>
                    <Text style={{ fontSize: 14, color: '#C7F4AD', top: 35 }}>{codefans_net_CC2PY(images.cropname)}</Text>
                </View>
                <View style={{ flexDirection: 'row', width: width, justifyContent: 'center' }}>
                    {/* 生长周期 */}
                    <View style={{
                        flexDirection: 'row', width: '47%',
                        height: 95, alignItems: 'center'
                    }}>

                        <Image
                            style={{ width: 61, height: 61 }}
                            source={require('../../../images/news/day.png')}
                        />
                        <View>
                            <Text style={{ color: '#8DD962', fontSize: 15, bottom: 8, left: 10, fontWeight: 'bold' }}>生长周期</Text>
                            <Text style={{ fontSize: 20, left: 25, top: 2 }}>{images.growday * 4}天</Text>
                        </View>
                    </View>
                    {/* 光照 */}
                    <View style={{
                        flexDirection: 'row', width: '40%',
                        height: 95, alignItems: 'center'
                    }}>
                        <Image
                            style={{ width: 61, height: 61 }}
                            source={require('../../../images/news/sun.png')}
                        />
                        <View>
                            <Text style={{ color: '#8DD962', fontSize: 15, bottom: 9, left: 12, fontWeight: 'bold' }}>光照</Text>
                            <Text style={{ fontSize: 20, left: 20, top: 1 }}>{images.ifsun}</Text>
                        </View>
                    </View>
                </View>
                <View style={{ flexDirection: 'row' }}>
                    {/* 适宜温度 */}
                    <View style={{
                        flexDirection: 'row', width: '47%',
                        height: 80, alignItems: 'center'
                    }}>
                        <Image
                            style={{ width: 61, height: 61 }}
                            source={require('../../../images/news/temp.png')}
                        />
                        <View>
                            <Text style={{ color: '#8DD962', fontSize: 15, bottom: 8, left: 10, fontWeight: 'bold' }}>适宜温度</Text>
                            <Text style={{ fontSize: 20, left: 21, top: 2 }}>{images.mintemp}~{images.maxtemp}℃</Text>
                        </View>
                    </View>
                    {/* 潮湿度 */}
                    <View style={{
                        flexDirection: 'row', width: '40%',
                        height: 80, alignItems: 'center'
                    }}>
                        <Image
                            style={{ width: 61, height: 61 }}
                            source={require('../../../images/news/water.png')}
                        />
                        <View>
                            <Text style={{ color: '#8DD962', fontSize: 15, bottom: 9, marginLeft: 12, fontWeight: 'bold' }}>潮湿度</Text>
                            <Text style={{ fontSize: 20, marginLeft: 22, top: 1 }}>{JSON.parse(images.wettemp)[0]}%~{JSON.parse(images.wettemp)[1]}%</Text>
                        </View>
                    </View>
                </View>
                <View style={{ marginTop: 25, width: '80%' }}>
                    <Text style={{ fontSize: 19, right: 30, marginBottom: 12 }}>
                        <MaterialCommunityIcons name="flower-tulip-outline" size={24} color="#8DD962" style={{ right: 15 }} />
                        <Text > 养护贴士</Text>
                    </Text>
                    {/* <Text>{tips}</Text> */}
                    {
                        tips.map((item, index) => {
                            return (
                                <Text key={item.tipid} style={{ width: '100%', lineHeight: 26, right: 4 }}>
                                    {}{index + 1}.  {item.tiptext}
                                </Text>
                            )
                        })
                    }
                </View>
                {/* <Btn
                    onPress={toBuy}
                    style={{
                        marginTop: 50,
                        marginBottom: 50,
                        width: '40%', height: 49,
                        backgroundColor: '#B3EE91',
                        borderRadius: 10
                    }}>
                    <Text style={{ fontSize: 18, fontWeight: 'bold' }}>立即购买</Text>
                </Btn> */}
                <View style={{width: '100%' }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15, marginTop: 15, height: 50, marginBottom: 8,  }}>
                        <AntDesign name="book" size={24} color="#8DD962" />
                        <Text style={{ fontSize: 19, marginLeft: 8, lineHeight: 50 }}>相关百科</Text>
                    </View>
                    {
                        plantNews.map(item => {
                            return (
                                <TouchableOpacity activeOpacity={0.68} style={{ alignItems: 'center', marginBottom: '1.8%' }} key={item.guideid} onPress={() => toMessage(item)}>
                                    <View style={{ width: '95%' }} key={item.guideid}>
                                        <View style={{ backgroundColor: 'rgba(203,242,203,0.35)', borderRadius: 10 }}>
                                            <Text style={styles.addTime}>{moment(item.date).format("YYYY-MM-DD HH:mm")}</Text>
                                            <View style={styles.outBox}>
                                                <View style={styles.textBox}>
                                                    <Text style={styles.textTitle}>
                                                        {item.title}
                                                    </Text>
                                                    <Text style={{ color: '#c1c1c1', fontSize: 13.5 }}>
                                                        { } 阅读 {item.readnum}
                                                    </Text>
                                                </View>
                                                <View style={{ width: '25%', alignItems: 'center', }}>
                                                    <Image
                                                        style={styles.textImg}
                                                        source={{ uri: baseURL + item.coverimgsmall }}
                                                    />
                                                </View>
                                            </View>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            )
                        })
                    }
                </View>
            </View>
        </ScrollView>
    )
}
const styles = StyleSheet.create({
    addTime: {
        height: 35,
        lineHeight: 35,
        marginLeft: width * 0.035,
        color: '#c1c1c1'
    },
    outBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: '3%'
    },
    textBox: {
        width: '75%',
        justifyContent: 'center',
        paddingLeft: '3%',
        maxHeight: height * 0.14
    },
    textTitle: {
        lineHeight: 25,
        fontSize: 15,
        width: '92%',
        maxHeight: '60%',
        marginBottom: '2%'
    },
    textImg: {
        width: width * 0.17,
        height: width * 0.17,
        backgroundColor: '#fee'
    },
});

export default PlantImage
